<template>
    <div class="common-details">
        <common-title title="知识库详情" backPath="/schoolAdmin/knowledgeAdmin"></common-title>
        <div class="common-tab-content" style="margin-top: 0">
            <div class="query-table-page">
                <div class="query-box">
                    <el-form :inline="true" :model="formObj" class="common-query-form">
                        <el-form-item label="问题关键字">
                            <el-input v-model="formObj.user" placeholder="请输入问题关键字" clearable/>
                        </el-form-item>
                        <el-form-item label="类型">
                            <el-select
                                    v-model="formObj.region"
                                    placeholder="请选择类型"
                                    clearable
                            >
                                <el-option v-for="item in lylxLst" :label="item.name" :value="item.code" :key="item.code"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button :loading="loading" type="primary" @click="queryFn">查询</el-button>
                            <el-button :loading="loading" type="primary" @click="initFn">重置</el-button>
                            <el-button :loading="loading" type="primary" @click="editFn('新增')">新增</el-button>
                            <el-button :loading="loading" type="primary" @click="uploadData">导入</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table-box">
                    <div class="table-list">
                        <el-table :key="tbKey" ref="commonTable" :data="tableData" border stripe style="width: 100%" height="620px">
                            <el-table-column type="index" label="序号" width="60"/>
                            <el-table-column prop="lx" label="类型" width="140px"/>
                            <el-table-column prop="wt" label="问题" width="300px"/>
                            <el-table-column prop="da" label="答案">
                                <template #default="scope">
                                    <p v-for="item in scope.row.da">{{item}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="id" label="操作" width="100px">
                                <template #default="scope">
                                    <span @click="editFn('修改')" class="common-table-btn">修改</span>
                                    <span @click="deleteFn(scope) " class="common-table-btn">删除</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="paging-box">
                        <el-pagination
                                v-model:current-page="currentPage"
                                v-model:page-size="pageSize"
                                :page-sizes="[10, 20, 50, 100]"
                                :size="size"
                                :background="background"
                                layout="total, prev, pager, next, sizes, jumper"
                                :total="124"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
            <el-dialog v-model="visible" width="500">
                <template #header>
                    <div class="common-title">
                        <h4 class="title-class">
                            <el-icon class="el-icon--left">
                                <Edit/>
                            </el-icon>
                            <span>{{dialogTitle}}</span>
                        </h4>
                    </div>
                </template>
                <div class="common-dialog-wrap">
                    <el-form ref="commonForm" :model="addObj" class="common-form" label-position="top">
                        <el-form-item label="类型">
                            <el-select
                                    v-model="addObj.lm"
                                    placeholder="请选择类型"
                                    clearable
                            >
                                <el-option v-for="item in lylxLst" :label="item.name" :value="item.code" :key="item.code"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="问题">
                            <el-input v-model="addObj.lb" placeholder="请输入问题" clearable/>
                        </el-form-item>
                        <el-form-item label="答案">
                            <el-input type="textarea" :rows="6" v-model="addObj.zlb" placeholder="请输入答案" clearable/>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="closeAdd">取消</el-button>
                        <el-button type="primary" @click="enterAdd">确定</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script setup lang="ts">
import CommonTitle from "@/components/common-title.vue"
import {reactive, ref, onMounted} from "vue"
import {Edit, Upload, UploadFilled} from '@element-plus/icons-vue'
import {gxztList, lmList, lylxLst} from "@/utils/dict"
import router from "@/router";
import {$confirm, $msg} from "@/utils";
const formObj = reactive({
    user: '',
    region: '',
    type: '',
    date: ''
})
const dialogTitle = ref('')
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const size = ref('default')
const background = ref(false)
const loading = ref(false)
const visible = ref(false)
const addObj = reactive({
    lb: '',
    zlb: '',
    lm: ''
})
const visible2 = ref(false)
function enterAdd2(){
    $msg({type: 'success', message: '导入成功'})
    visible2.value = false
}
const lbList = ref([
    {
        code: 'code1',
        name: '普通高校招生',
        children: [
            {
                code: 'code1-1',
                name: '本科招生'
            },
            {
                code: 'code1-2',
                name: '专科招生'
            },
            {
                code: 'code1-3',
                name: '艺术体育'
            },
            {
                code: 'code1-4',
                name: '技能高考'
            },
            {
                code: 'code1-5',
                name: '可视化'
            },
            {
                code: 'code1-6',
                name: '军队院校招生'
            },
            {
                code: 'code1-7',
                name: '港澳台招生'
            },
            {
                code: 'code1-8',
                name: '高职单招'
            },
            {
                code: 'code1-9',
                name: '特殊类型招生'
            }
        ]
    },
    {
        code: 'code2',
        name: '探究生招生',
        children: [
            {
                code: 'code2-1',
                name: '政策规定'
            }
        ]
    },
    {
        code: 'code3',
        name: '成人高校招生',
        children: [
            {
                code: 'code3-1',
                name: '政策规定'
            },
            {
                code: 'code3-2',
                name: '公告快讯'
            }
        ]
    },
    {
        code: 'code4',
        name: '高中阶段招生',
        children: [
            {
                code: 'code4-1',
                name: '政策规定'
            }
        ]
    }
])
const zlbList = ref([])
const rules = ref({
    lb: [
        {required: true, message: '请选择类别', trigger: 'change'}
    ],
    zlb: [
        {required: true, message: '请选择子类别', trigger: 'change'}
    ],
    lm: [
        {required: true, message: '请选择栏目', trigger: 'change'}
    ],
})
function changeLb(e){
    if(e){
        zlbList.value = lbList.value.find(item => item.code === e).children
    }else {
        zlbList.value = []
    }
}
function uploadData(){
    visible2.value = true
}
const commonForm = ref(null)
const commonTable = ref(null)
const tbKey = ref(0)
function queryFn() {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const addFn = () => {
    visible.value = true
}
const initFn = () => {
    loading.value = true
    formObj.value = {
        user: '',
        region: '',
        type: '',
        date: ''
    }
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
const closeAdd = () => {
    visible.value = false
}
const enterAdd = async () => {
    $msg({
        type: 'success',
        message: dialogTitle.value + '成功',
    })
    visible.value = false
}
const editFn = (flag) => {
    dialogTitle.value = flag
    visible.value = true
}
const deleteFn = (obj) => {
    $confirm({
        title: '是否删除该数据?',
        type: 'delete'
    }).then(() => {
        $msg({
            type: 'success',
            message: '删除成功',
        })
    })
}
const topFn = (obj) => {
    $confirm({
        title: '是否置顶该数据?'
    }).then(() => {
        $msg({
            type: 'success',
            message: '置顶成功',
        })
    })
}
const batchOperate = (e)=>{
    const selectedRows = commonTable.value.getSelectionRows()
    if (!selectedRows || selectedRows.length === 0) {
        $msg({
            type: 'warning',
            message: '请至少选择一条数据',
        })
        return
    }
    switch(e) {
        case 'a':
            $confirm({
                title: `确定要删除选中的${selectedRows.length}条数据吗?`,
                type: 'delete'
            }).then(() => {
                $msg({
                    type: 'success',
                    message: '删除成功',
                })
                tbKey.value += 1
            })
            break
        case 'b':
            $confirm({
                title: `确定要置顶选中的${selectedRows.length}条数据吗?`
            }).then(() => {
                $msg({
                    type: 'success',
                    message: '置顶成功',
                })
                tbKey.value += 1
            })
            break
    }
}
onMounted(() => {
    for (let i = 0; i < 20; i++) {
        tableData.value.push({
            wt: '咨询联系',
            lx: '咨询联系',
            da: ['详见我校官网——组织机构；','1.内设机构：http://www.hbgyzy.edu.cn/zzjg/nsjg.html','2.教学和教辅单位：http://www.hbgyzy.edu.cn/zzjg/jxjfdw.htm']
        },{
            wt: '贵校官网网址是多少？',
            lx: '咨询联系',
            da: ['http://www.hbgyzy.edu.cn/']
        },{
            wt: '贵校举办高等教育多少年？',
            lx: '学校介绍',
            da: ['我校自1976年举办高等教育至今，已有近50年的高等教育办学历史。']
        },{
            wt: '贵校举办高等教育多少年？',
            lx: '学校介绍',
            da: ['我校自1976年举办高等教育至今，已有近50年的高等教育办学历史。']
        })
    }
})
</script>
<style scoped lang="less">
.common-details {
    background: #fff;
    padding: 12px;
}
</style>